<template>
  <van-popup
    v-model="open"
    position="right"
    :style="{ height: '100%', width: '100%' }"
  >
    <head-top
      routerName="no"
      @to-router="hide()"
      :title="formData.addressId ? '修改地址' : '新增收货地址'"
    ></head-top>
    <div class="content-wrap">
      <van-form @submit="onSubmit" ref="formData" autocomplete="off">
        <van-field
          v-model="formData.userName"
          name="userName"
          label="姓名"
          placeholder="请输入姓名"
          input-align="right"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="formData.mobile"
          name="请输入手机号码"
          label="手机号"
          placeholder="请输入手机号码"
          input-align="right"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <van-field
          v-model="formData.area"
          is-link
          readonly
          name="mobile"
          @click="$refs.area.show = true"
          label="所在地区"
          placeholder="请输选择所在地区"
          input-align="right"
          :rules="[{ required: true, message: '请输选择所在地区' }]"
        />
        <van-field
          class="address"
          v-model="formData.address"
          name="address"
          rows="1"
          autosize
          label="详细地址"
          type="textarea"
          placeholder="请输入详细地址"
          input-align="right"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        />
        <div class="delete" v-if="formData.addressId" @click="Deletes">
          删除地址
        </div>
        <van-button plain>提交</van-button>
      </van-form>
      <v-area ref="area" @area-event="areaEvent"></v-area>
    </div>
  </van-popup>
</template>
<script>
import { Popup, Form, Field, Button, Toast, Dialog } from "vant";
import HeadTop from "@/components/head";
import { addAddress, deleteAddress } from "@/api/address";
export default {
  props: {
    pageNumber: {
      type: Number,
      default: null,
    },
  },
  components: {
    HeadTop,
    [Popup.name]: Popup,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
    vArea: (resolve) => require(["./area"], resolve),
  },
  data() {
    return {
      open: false,
      formData: {},
    };
  },

  methods: {
    ResetFormData() {
      this.formData = {
        mobile: "",
        userName: "",
        address: "",
        provinces: "",
        cities: "",
        district: "",

        area: "",
      };
    },
    show(item) {
      this.open = true;
      if (item.AddressId) {
        this.formData = {
          mobile: item.mobile,
          userName: item.userName,
          address: item.address,
          provinces: item.province,
          cities: item.city,
          district: item.district,
          area: item.province + "/" + item.city + "/" + item.district,
          addressId: item.AddressId,
        };
      } else {
        this.ResetFormData();
      }
    },
    hide() {
      this.open = false;
      this.$emit("upPageNumber", 1);
    },
    watchHide(){
      this.open = false;
    },
    onSubmit() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "提交中...",
      });
      const data = {
        ...this.formData,
      };
      data.No_RSA = true;
      console.log(data)
      addAddress(data).then((res) => {
        if (res.data.resultStatus) {
          Toast.success(res.data.errorMessage);
          this.hide();
          this.$emit("load");
        } else {
          Toast.fail(res.data.errorMessage);
        }
        const timer = setInterval(() => {
          clearInterval(timer);
          Toast.clear();
        }, 1000);
      });
    },
    areaEvent(list) {
      const provinces = list[0].name;
      const cities = list[1].name;
      const district = list[2].name;
      this.formData.area = provinces + "/" + cities + "/" + district;
      this.formData.provinces = provinces;
      this.formData.cities = cities;
      this.formData.district = district;
      console.log(this.formData.area);
    },
    Deletes() {
      Dialog.confirm({
        title: "是否确定删除该地址",
      })
        .then(() => {
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "删除中...",
          });
          deleteAddress({
            addressId: this.formData.addressId,
          }).then((res) => {
            if (res.data.resultStatus) {
              Toast.success(res.data.errorMessage);
              this.hide();
              this.$emit("load");
            } else {
              Toast.fail(res.data.errorMessage);
            }
            const timer = setInterval(() => {
              clearInterval(timer);
              Toast.clear();
            }, 1000);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  watch: {
    //判断app按键返回上一页
    $route(to, from) {
      if (!to.query.address) {
        console.log('---')
        this.watchHide();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-form {
    .van-cell {
      &.address {
        min-height: 20px;
      }
      margin-bottom: 18px;
      padding: 13px 0;
      line-height: 20px;
      box-sizing: content-box;
      /deep/.van-field__value {
        .van-field__error-message {
          display: none;
        }
        input {
          font-size: 14px;
          font-weight: 400;
        }
      }
      /deep/.van-cell__right-icon {
        line-height: 20px;
        height: 20px;
      }
      /deep/.van-cell__title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
    }
    .delete {
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      line-height: 17px;
    }
    .van-button {
      display: block;
      margin: 90px auto 0 auto;
      width: 125px;
      height: 46px;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      background: #333333;
      border-radius: 2px;
    }
  }
}
</style>